<template>
  <div class="normal-select-material" v-loading="pageLoading">
    <el-radio-group v-if="!disabled" v-model="choosedRadio" @input="radioChange">
<!--      <el-radio label="1" border>-->
<!--        <div class="icon">-->
<!--          <svg-icon icon-class="h5link" />-->
<!--        </div>-->
<!--        <div class="text">h5链接</div>-->
<!--      </el-radio>-->
      <el-radio label="2" border>
        <div class="icon">
          <svg-icon icon-class="poster" />
        </div>
        <div class="text">海报</div>
      </el-radio>
      <el-radio label="3" border>
        <div class="icon">
          <svg-icon icon-class="article" />
        </div>
        <div class="text">文章</div>
      </el-radio>
      <el-radio label="4" border>
        <div class="icon">
          <svg-icon icon-class="file" />
        </div>
        <div class="text">文件</div>
      </el-radio>
      <el-radio label="5" border v-if="noInsurance">
        <div class="icon">
          <svg-icon icon-class="insurance" />
        </div>
        <div class="text">险种</div>
      </el-radio>
      <el-radio label="6" border>
        <div class="icon">
          <svg-icon icon-class="LocalLibrary" />
        </div>
        <div class="text">多媒体</div>
      </el-radio>
      <el-radio label="7" border>
        <div class="icon">
          <svg-icon icon-class="form-svg" />
        </div>
        <div class="text">问卷</div>
      </el-radio>
      <el-radio label="8" border v-if="showMiniProgram">
        <div class="icon">
          <svg-icon icon-class="smallProgram"/>
        </div>
        <div class="text">小程序</div>
      </el-radio>
    </el-radio-group>
    <div v-if="selectionList.length" style="margin-bottom: 10px;">
      <div v-for="(item, index) in selectionList" :key="index">
        <template v-if="item.mediaType || item.materialType">
          {{ mediaTypeToText[item.mediaType || item.materialType] }}：
          {{ item.name || item.materialName }}
          <el-button type="text" v-if="['66'].indexOf(item.mediaType || item.materialType) == -1" @click="materialInfo(item)" style="cursor: pointer;">详情</el-button>
          <el-button v-if="!disabled" type="text" @click="deleteMaterial(index)" style="cursor: pointer;">删除</el-button>
        </template>
      </div>
    </div>
    <el-dialog title="选择素材" :visible="selectVisible" :width="['1', '2'].indexOf(choosedRadio) != -1 ? '888px' : '920px'" :modal="false" append-to-body :close-on-click-modal="false" :show-close="false">
      <div>
        <!-- H5链接：1 -->
        <H5Link v-if="choosedRadio === '1'" ref="linkRef" :linkList="selectionList" :show-tabs.sync="showTabs" @confirm="selectMaterialConfrim" @selectCancelFn="selectCancelFn" @view="materialInfo" />
        <!-- 海报：2 -->
        <MaterialPoster v-if="choosedRadio === '2'" :linkList="selectionList" :show-tabs.sync="showTabs" @confirm="selectMaterialConfrim" @selectCancelFn="selectCancelFn" @view="materialInfo" />
        <!-- 文章：3 -->
        <MaterialArticle v-if="choosedRadio === '3'" :linkList="selectionList" :show-tabs.sync="showTabs" @confirm="selectMaterialConfrim" @selectCancelFn="selectCancelFn" @view="materialInfo" />
        <!-- 文件：4 -->
        <MyFile v-if="choosedRadio === '4'" ref="multiFile" :linkList="selectionList" :show-tabs.sync="showTabs" @confirm="selectMaterialConfrim" @selectCancelFn="selectCancelFn" @view="materialInfo" />
        <!-- 险种库：5 -->
        <Insurance v-if="choosedRadio === '5'" ref="insuranceRef" :linkList="selectionList" :show-tabs.sync="showTabs" @confirm="selectMaterialConfrim" @selectCancelFn="selectCancelFn" @view="materialInfo" />
        <!-- 多媒体:6 -->
        <multi-media v-if="choosedRadio === '6'" ref="multiMediaRef" :linkList="selectionList" :show-tabs.sync="showTabs" @confirm="selectMaterialConfrim" @selectCancelFn="selectCancelFn" @view="materialInfo" />
        <!-- 问卷:7 -->
        <MyForm v-if="choosedRadio === '7'" ref="formRef" :linkList="selectionList" :show-tabs.sync="showTabs" @confirm="selectMaterialConfrim" @selectCancelFn="selectCancelFn" @view="materialInfo" />
        <!-- 小程序：8-->
        <SmallProgram v-if="choosedRadio === '8'" :linkList="selectionList" @confirm="selectProgramConfrim" @selectCancelFn="selectCancelFn" ></SmallProgram>
      </div>
    </el-dialog>
    <!-- 海报 -->
    <el-dialog title="预览" width="350px" :visible="materialPosterVisible" append-to-body :close-on-click-modal="false" @close="materialPosterVisible = false;">
      <el-image :src="materialPosterUrl"></el-image>
    </el-dialog>
    <!-- 文章库 -->
    <el-dialog title="详情" width="520px" :visible="materialArticleVisible" append-to-body :close-on-click-modal="false" @close="materialArticleVisible = false;">
      <div class="article-dialog">
        <p class="title">{{ previewContent.materialName }}</p>
        <p class="author">
          <span style="color: #082aff;">{{ previewContent.author }}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {{ previewContent.createTime }}
        </p>
        <div class="content" v-html="previewContent.content"></div>
      </div>
    </el-dialog>
    <!-- 文件 -->
    <el-dialog title="详情" width="520px" :visible="materialFileVisible" append-to-body :close-on-click-modal="false" @close="materialFileVisible = false;">
      <el-form ref="form" :model="fileForm" label-width="80px">
        <el-form-item label="文件名"> {{ fileForm.name }}</el-form-item>
        <el-form-item label="企业分组" v-if="fileForm.companyGroupName">{{ fileForm.companyGroupName }}</el-form-item>
        <el-form-item label="个人分组" v-if="fileForm.groupName && !fileForm.companyGroupName">{{ fileForm.groupName }}</el-form-item>
        <el-form-item label="摘要">{{ fileForm.text }}</el-form-item>
        <el-form-item label="标签">
          <tag-group v-model="fileForm.weGroupTagVOS" :disabled="true" />
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- H5链接 -->
    <el-dialog title="详情" width="520px" :visible="materialLinkVisible" append-to-body :close-on-click-modal="false" @close="materialLinkVisible = false;">
      <el-form ref="linkForm" :model="linkForm" label-width="80px">
        <el-form-item label="链接地址:">
          {{ linkForm.materialUrl }}
        </el-form-item>
        <el-form-item label="链接标题:">
          {{ linkForm.title }}
        </el-form-item>
        <el-form-item label="个人分组:">
          {{ linkForm.name }}
        </el-form-item>
        <el-form-item label="链接类型:">
          <el-radio-group v-model="linkForm.materialName" disabled>
            <el-radio label="0">内部链接（雷达记录）</el-radio>
            <el-radio label="1">永久跳转</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="链接描述:">
          {{ linkForm.content }}
        </el-form-item>
        <el-form-item label="其他设置:">
          <el-checkbox v-model="linkForm.isSync" disabled>同步到企业库
          </el-checkbox>
        </el-form-item>
        <el-form-item label="标签:">
          <tag-group v-model="linkForm.tagVOS" :disabled="true" />
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 险种 -->
    <el-dialog title="详情" width="520px" :visible="materialInsuranceVisible" append-to-body :close-on-click-modal="false" @close="materialInsuranceVisible = false;">
      <el-form ref="detailForm" :model="detailForm" label-width="80px">
        <el-form-item label="首图:">
          <div v-if="detailForm.riskImgUrlList" class="img-list">
            <img v-for="(item, index) in detailForm.riskImgUrlList" :src="item" :key="index" />
          </div>
        </el-form-item>
        <el-form-item label="名称:">{{ detailForm.riskName }}</el-form-item>
        <el-form-item label="分组:">
          <div v-for="item in groupOption" :key="item.id">
            <span v-show="item.id === detailForm.categoryId">
              {{ item.name }}
            </span>
          </div>
        </el-form-item>
        <el-form-item label="险种链接:">{{ detailForm.riskLink }}</el-form-item>
        <el-form-item label="封面:">
          <div v-if="detailForm.coverImgUrl" class="img-list">
            <img :src="detailForm.coverImgUrl" />
          </div>
        </el-form-item>
        <el-form-item label="摘要:">{{ detailForm.content }}</el-form-item>
      </el-form>
    </el-dialog>
    <!-- 多媒体 -->
    <el-dialog title="查看素材" :visible.sync="materialMediaVisible" append-to-body :close-on-click-modal="false" :before-close="beforeCloseDialog">
      <el-form>
        <div class="demo-image__placeholder">
          <div class="block">
            <el-image style="width: 100%; height: 100%" :src="this.judgementCondition.materialUrl" v-show="this.judgementCondition.content == '5'">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
        </div>
      </el-form>
      <el-form v-show="this.judgementCondition.content == '6'">
        <video controls style="width: 100%; height: 100%" ref="vueMiniPlayer">
          <source :src="this.judgementCondition.materialUrl" type="video/mp4" />
        </video>
      </el-form>
      <el-form v-show="this.judgementCondition.content == '7'">
        <center>
          <audio :src="this.judgementCondition.materialUrl" autoplay="autoplay" controls="controls" ref="audio">
            Your browser does not support the audio element.
          </audio>
        </center>
      </el-form>
    </el-dialog>
    <!-- 问卷 -->
    <el-dialog title="预览" width="520px" :visible.sync="materialFormVisible" append-to-body :close-on-click-modal="false">
      <el-form ref="dataForm" :model="dataForm" label-width="80px">
        <el-form-item label="标题:"> {{ dataForm.title }}
        </el-form-item>
        <el-form-item label="填写人数:">
          {{ dataForm.writeCount }}
        </el-form-item>
        <el-form-item label="创建人:">
          {{ dataForm.createBy }}
        </el-form-item>
        <el-form-item label="标签:">
          <tag-group v-model="dataForm.weGroupTagVOS" :disabled="true" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import MaterialPoster from './radarMaterial/MaterialPoster.vue'
import MultiMedia from './radarMaterial/MultiMedia.vue'
import File from './radarMaterial/file.vue'
import Form from './radarMaterial/form.vue'
import Insurance from './radarMaterial/Insurance.vue'
import H5Link from './radarMaterial/h5Link.vue'
import MaterialArticle from './radarMaterial/MaterialArticle'
import SmallProgram from "./radarMaterial/smallProgram.vue";
import Preview from './radarMaterial/Preview'
import { getLinkmanage } from "@/api/article/group";
import { detailRisk } from "@/api/communityOperating/insurance"
import { categoryList, getFormManage } from '@/api/article/group'
import { articleInfo } from '@/api/article/group'

export default {
  name: 'NormalSelectMaterial',
  components: {
    SmallProgram,
    MaterialPoster,
    MultiMedia,
    MaterialArticle,
    MyFile: File,
    MyForm: Form,
    Insurance,
    H5Link,
    Preview
  },
  props: {
    selectedList: {
      type: Array,
      default: () => []
    },
    // 个人sop查看详情使用
    disabled: {
      type: Boolean,
      default: false
    },
    showTabs: {
      type: Boolean,
      default: true,
    },
    noInsurance: {
      type: Boolean,
      default: true,
    },
    showMiniProgram: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      pageLoading: false,
      choosedRadio: '',
      selectionList: [],
      selectVisible: false,
      mediaTypeToText: {
        11: 'h5链接',
        5: '海报',
        3: '文件',
        4: '文章',
        99: '险种',
        7: '多媒体',
        8: '本地上传',
        9: '',
        10: '问卷',
        66: '小程序',
        100: '本地上传文件',
      },
      materialLinkVisible: false,
      linkForm: {},
      materialPosterVisible: false,
      materialPosterUrl: '',
      materialArticleVisible: false,
      previewContent: {},
      materialFileVisible: false,
      fileForm: {},
      materialInsuranceVisible: false,
      detailForm: {},
      groupOption: [],
      materialMediaVisible: false,
      judgementCondition: '',
      materialFormVisible: false,
      dataForm: {},
    }
  },
  mounted() {
    this.selectionList = JSON.parse(JSON.stringify(this.selectedList))
    // 获取分组
    // categoryList({ levelType: 2 }).then((res) => {
    //   if (res.code === 200) {
    //     this.groupOption = res.data;
    //   }
    // });
    console.log(this.selectedList, 'selectedList')
  },
  methods: {
    radioChange() {
      this.selectVisible = true
    },
    selectMaterialConfrim(val) {
      this.selectionList = val
      this.selectVisible = false
      this.choosedRadio = ''
      this.$emit('confirmSelect', this.selectionList)
    },
    selectProgramConfrim(val){
      console.log(val, this.selectionList, 'val')
      this.selectionList = val
      this.selectVisible = false
      this.choosedRadio = ''
      this.$emit('confirmSelect', this.selectionList)
    },
    selectCancelFn() {
      this.choosedRadio = ''
      this.selectVisible = false
    },
    materialInfo(item) {
      console.log(item, 'item')
      let type = item.mediaType || item.materialType
      if (type == '5') {
        this.materialPosterUrl = item.coverUrl || item.materialUrl
        this.materialPosterVisible = true
      }
      if (type == '4') {
        articleInfo(item.id).then(res => {
          if (res.code === 200) {
            const { data } = res
            this.previewContent = data;
            this.previewContent.content = data.content.replace(/\<img/gi, "<img style='max-width:100%;height:auto;' ")
            this.obj = data
          }
        })
        this.materialArticleVisible = true
      }
      if (type == '11') {
        this.materialLinkVisible = true;
        const data = {
          id: item.id,
          levelType: item.levelType,
          mediaType: type,
        };
        getLinkmanage(data).then((res) => {
          if (res.code == 200) {
            res.rows[0].isSync == 1 ? (res.rows[0].isSync = true) : (res.rows[0].isSync = false);
            this.linkForm = res.rows[0];
          }
        })
      }
      if (type == '3') {
        this.fileForm = item
        this.materialFileVisible = true
      }
      if (type == '99') {
        let riskId = item.riskId || item.materialId || item.id
        detailRisk({ riskId }).then((res) => {
          if (res.code === 200) {
            this.detailForm = { ...res.data };
          }
        });
        this.materialInsuranceVisible = true;
      }
      if (type == '7') {
        this.judgementCondition = item;
        this.materialMediaVisible = true;
      }
      if (type == '10') {
        let id = item.id || item.materialId;
        getFormManage({id:id}).then(res => {
          if(res.code == 200){
            this.dataForm = {
              writeCount: item.writeCount,
              ...res.data.scrmTableDetail
            };
          };
        })
        this.materialFormVisible = true;
      }
    },
    deleteMaterial(index) {
      this.selectionList.splice(index, 1);
      this.$emit('confirmSelect', this.selectionList);
    },
    suspended() {
      if (+this.judgementCondition.content === 7) this.stop()
      if (+this.judgementCondition.content === 6) this.handleCancel()
      this.materialMediaVisible = false
    },
    beforeCloseDialog() {
      if (+this.judgementCondition.content === 7) this.stop()
      if (+this.judgementCondition.content === 6) this.handleCancel()
      this.materialMediaVisible = false
    },
    handleCancel(e) {
      this.visible = false
      this.$refs.vueMiniPlayer.pause() //暂停
    },
    //音频暂停
    stop() {
      this.dialogVisible = false
      this.$refs.audio.pause()
      this.$refs.audio.currentTime = 0
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-image{
  display: block;
  position: static;
}
.normal-select-material{
  .el-radio-group {
    ::v-deep .el-radio {
      height: auto;
      padding: 8px 15px;
      line-height: 0;
      margin: 0 20px 20px 0;
      .el-radio__input {
        display: none !important;
      }

      .el-radio__label {
        .icon {
          text-align: center;
          svg {
            width: 24px;
            height: 24px;
          }
        }
        .text {
          margin-top: 5px;
          line-height: 14px;
          width: 38px;
          text-align: center;
        }
      }
    }
    ::v-deep .el-radio.is-bordered + .el-radio.is-bordered{
      margin-left: 0;
    }
  }
}
.article-dialog{
  background-color: #fff;
  border-radius: 3px;
  height: 612px;
  overflow: scroll;
  .title {
    line-height: 1.4;
    padding: 20px 20px 15px 20px;
    font-size: 18px;
  }
  .author {
    line-height: 2;
    font-size: 14px;
    color: #999;
    padding: 0 20px 15px 20px;
  }
  .content {
    padding: 0 15px 15px 15px;
    height: 425px;
    overflow-y: auto;
  }
}
.img-list {
  width: 100%;
  display: flex;
  justify-content: flex-start;

  img {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
  }
}
</style>
